<template>
  <van-tabbar v-model="active" active-color="#fc6627" route>
    <van-tabbar-item icon="home-o" to="/">
      <span>首页</span>
      <template v-slot:icon="{ active }">
        <!-- <van-icon v-if="active" name="search"></van-icon>
        <van-icon v-else name="home-o"></van-icon> -->
        <GeekIcon v-if="active" name="home-sel"></GeekIcon>
        <GeekIcon v-else name="home"></GeekIcon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="home-o" to="/question">问答</van-tabbar-item>
    <van-tabbar-item icon="home-o" to="/video">视频</van-tabbar-item>
    <van-tabbar-item icon="home-o" to="/user">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import GeekIcon from './geek-icon.vue'
export default {
  data () {
    return {
      active: 0
    }
  },
  components: {
    GeekIcon
  }
}
</script>

<style></style>
